<template>
  <div class="merchat-list">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{
        name
      }}</BreadcrumbItem>
    </Breadcrumb>
    <Row type="flex">
      <Form
        ref="formInline"
        :model="formInline"
        inline
        :label-width="0"
        label-position="left"
      >
        <FormItem prop="status" label="">
          <Select
            v-model="formInline.customerStatus"
            placeholder="报备状态"
            style="minwidth: 162px"
            filterable
            clearable
          >
            <Option
              v-for="item in customerStatusList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem prop="status" label="">
          <Select
            v-model="formInline.confirmStatus"
            placeholder="交易状态"
            style="minwidth: 162px"
            filterable
            clearable
          >
            <Option
              v-for="item in confirmStatusList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="" prop="mobile">
          <Input
            type="text"
            v-model="formInline.mobile"
            placeholder="客户手机号"
            clearable
          />
        </FormItem>
        <FormItem label="" prop="devCompany">
          <Input
            type="text"
            v-model="formInline.devCompany"
            placeholder="渠道商户"
            clearable
          />
        </FormItem>
        <FormItem label="" prop="agentCompany">
          <Input
            type="text"
            v-model="formInline.agentCompany"
            placeholder="经纪人公司"
            clearable
          />
        </FormItem>
        <FormItem label="" prop="premisesName">
          <Input
            type="text"
            v-model="formInline.premisesName"
            placeholder="楼盘名称"
            clearable
          />
        </FormItem>
        <FormItem prop="date" label="">
          <DatePicker
            ref="datePicker"
            type="daterange"
            @on-change="selectDate"
            placeholder="请选择时间"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <!--        <FormItem label="" prop="isQFUser" v-if="false">-->
        <!--          <IsQfUser v-model="formInline.isQFUser" placeholder="是否巧房用户" />-->
        <!--        </FormItem>-->
        <div class="form-but">
          <Button type="success" @click="getList">查询</Button>
        </div>
      </Form>
    </Row>
    <Spin size="large" fix v-if="spinShow">预计5秒后返回,请稍候...</Spin>
    <Table
      stripe
      border
      ref="selection"
      :columns="columns"
      :data="dataList"
    ></Table>
    <Page
      :total="total"
      show-sizer
      show-elevator
      show-total
      @on-change="changePageNum"
      @on-page-size-change="changePageSize"
    />
    <NormalReportDetailModal
      ref="normalReportDetail"
      v-bind:reportInfo="reportDetail"
    />
  </div>
</template>

<script>
import { formatTime } from "@/utils";
import Api from "@/api";
import NormalReportDetailModal from "./normalReportDetailModal.vue";
// import IsQfUser from '@/components/IsQfUser.vue';

const logoImgSrc = require("../../assets/images/logo-1.png");

const report = Api.report;
export default {
  name: "list",
  components: {
    NormalReportDetailModal,
    // IsQfUser,
  },
  data() {
    return {
      breadcrumb: ["报备管理", "通用报备查询"],
      reportDetail: {},
      formInline: {
        customerStatus: "",
        confirmStatus: "",
        mobile: "",
        devCompany: "",
        agentCompany: "",
        premisesName: "",
        createTimeStart: "",
        createTimeEnd: "",
        // isQFUser: '-1'
      },
      spinShow: false,
      customerStatusList: [
        {
          label: "无效",
          value: "-1",
        },
        {
          label: "待审核",
          value: "0",
        },
        {
          label: "未到访",
          value: "10",
        },
        {
          label: "已到访",
          value: "6",
        },
      ],
      confirmStatusList: [
        {
          label: "待定",
          value: "0",
        },
        {
          label: "认筹",
          value: "1",
        },
        {
          label: "认购",
          value: "2",
        },
        {
          label: "签约",
          value: "3",
        },
        {
          label: "失败",
          value: "4",
        },
      ],
      columns: [
        {
          title: "渠道商户",
          key: "devCompany",
        },
        {
          title: "楼盘名称",
          key: "premisesName",
        },
        {
          title: "经纪人",
          key: "accountName",
        },
        {
          title: "经纪人公司",
          width: 160,
          key: "",
          render: (h, params) => {
            const divFun = function () {
              return h(
                "span",
                {
                  // style: {
                  //   width: '84px',
                  //   display: 'inline-block',
                  //   textOverflow: 'ellipsis',
                  //   overflow: 'hidden',
                  //   whiteSpace: 'nowrap',
                  //   position: 'relative',
                  //   top: '-5px',
                  // }
                },
                params.row.agentCompany
              );
            };
            const imgFun = function () {
              return h("img", {
                style: {
                  marginRight: "5px",
                  width: "34px",
                  height: "33px",
                  position: "relative",
                  top: "3px",
                },
                attrs: {
                  src: logoImgSrc,
                },
              });
            };
            const renderArr = [divFun()];
            if (params.row.isQFUser === "1") {
              renderArr.push(imgFun());
            }
            return h("div", renderArr);
          },
        },
        {
          title: "客户姓名",
          key: "customerName",
        },
        {
          title: "客户电话",
          key: "mobile",
        },
        {
          title: "预计到访时间",
          key: "hopeVisitTime",
          minWidth: 160,
          width: 160,
          render: (h, params) =>
            h("div", {}, formatTime(params.row.hopeVisitTime, "second")),
        },
        {
          title: "报备状态",
          key: "customerStatus",
        },
        {
          title: "交易状态",
          key: "confirmStatus",
        },
        {
          title: "报备时间",
          key: "createTime",
          minWidth: 160,
          width: 160,
          render: (h, params) =>
            h("div", {}, formatTime(params.row.createTime, "second")),
        },
        {
          title: "操作",
          key: "",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.showReportDetail(params.row);
                    },
                  },
                },
                "详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: "删除报备",
                        content: "确定删除此报备？",
                        onOk: () => {
                          this.deleteCusPre(params.row.id);
                        },
                      });
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dataList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    selectDate(date) {
      this.formInline.createTimeStart = date[0];
      this.formInline.createTimeEnd = date[1];
    },
    // 分页变化
    changePageNum(pageNum) {
      this.getList({ pageNum });
    },
    // 条数变化
    changePageSize(pageSize) {
      this.getList({ pageSize });
    },
    async getList(paramsPage = null) {
      const _self = this;
      _self.spinShow = true;
      let pageNum;
      let pageSize;
      let page;
      const statePage = this.page;
      if (paramsPage) {
        pageNum = paramsPage.pageNum || statePage.pageNum;
        pageSize = paramsPage.pageSize || statePage.pageSize;
        page = { pageNum, pageSize };
        this.page = { pageNum, pageSize };
      } else {
        page = statePage;
      }
      const formInline = this.formInline;
      const value = {};
      Object.keys(formInline).forEach((key) => {
        if (formInline[key]) {
          value[key] = formInline[key];
        }
      });
      const params = {
        page,
        ...value,
      };
      const { responseCode, data } = await this.$request(
        report.listCusPreNormal,
        params
      );
      _self.spinShow = false;
      if (responseCode === "1") {
        _self.dataList = data.list;
        _self.total = data.totalCount;
      }
    },
    showReportDetail(params) {
      this.reportDetail = params;
      this.$refs.normalReportDetail.cleanParams();
      this.$refs.normalReportDetail.initData(params);
    },
    async deleteCusPre(id) {
      const { responseCode, data } = await this.$request(
        report.deleteCusPre,
        { id }
      );
      if (responseCode === "1") {
        this.$Message.success("删除成功！");
        this.getList();
      } else {
        this.$Message.error("删除失败！");
      }
    },
  },
};
</script>

<style scoped>
</style>
